<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flex基础-项目属性04</title>
		<style type="text/css">
			ul{
				width: 1600px;
				display: flex;
				list-style: none;
			}
			li{
				width: 200px;
			}
			li:nth-of-type(1){
				background: yellow;
			}
			li:nth-of-type(2){
				background: yellowgreen;
			}
			li:nth-of-type(3){
				background: pink;
			}
			li:nth-of-type(4){
				background: orange;
				flex-basis: 300px;
			}
			li:nth-of-type(5){
				background: greenyellow;
			}
			
		</style>
	</head>
	<body>
		<!--
			项目的顺序: 默认为0,数值越小,越靠前;数值越大,越靠后(可以是负数),只用在flex布局的item里
			项目的扩展: 默认为0,大于0时,开启扩展功能
					 多个item具有flex-grow的属性时,父元素的剩余宽度按比例分配
					 比如: 第4个li设置了flex-grow: 2;第2个li设置了flex-grow: 1;
					 	那么ul的剩余宽度平均分成3份,li(4)占2份,li(2)占一份
			项目的缩小: 默认为1,如果值大于1,按比例缩小
					值为0时,不缩小
					比如: 父元素宽度为800,item宽度设置为200,200*5-800=200,item总宽度超过了父元素200px.
					默认为1时,200/5=40,宽度200-40=实际宽度160
					当li(4)设置为2,li(3)设置为0时,200/5=40(每份缩小40px),
					li(3)宽度还是初始宽度200,li(4)占两份40*2--200-80=120px,其他li(200-40=160px)
			项目的基准宽度:		
					flex-basis 会受限于min-width和max-width
					当不设置宽度时,flex-basis的值就是宽度(flex-basis的值同宽度的值)
		-->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
</html>
